<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<body background=""></body>
</head>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV" crossorigin="anonymous"></script> -->
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="gg.js"></script>
    <link rel="stylesheet" href="gg.css">
</head>
<style>
    table{
        width:80%;
        position:relative;
        margin:30px auto;
        border-collapse: collapse;
        border:1px solid gray;
    }
    th{
        background: cornflowerblue;
        height:2.5em;
    }
    .tdone{
        width:8%;
        text-align: center;
    }
    .tdtwo{
        width:20%;
        text-align: center;
    }
    .tdthree{
        width:12%;
        text-align: center;
    }
    .tdfour{
        width:20%;
        text-align: center;
    }
    .tdfive{
        width:10%;
        text-align: center;
    }
    .tdsix{
        width:10%;
        text-align: center;
    }
    .tdseven{
        width:20%;
        text-align: center;
    }
    td{
        height:2em;
        text-align: center;
        border:1px solid #ccc;
    }
    .num{
        display:inline-block;
        width:3em;
    }
    input{
        height:2em;
    }
    /* .talast{
        text-align: left;
    } */
</style>
<body>

<table>
    <thead>
    <tr>
        <th class="tdone">序号</th>
        <th class="tdtwo">商品名称</th>
        <th class="tdthree">数量</th>
        <th class="tdfour">单价</th>
        <th class="tdfive">小计</th>
        <th class="tdsix">操作</th>
        <th class="tdseven">订单号</th>
    </tr>
    </thead>
    <tbody>
    <tr class="trclass">
        <td class="tdone xuhao">1</td>
        <td class="tdtwo ">Java语言与应用</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">80</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">2</td>
        <td class="tdtwo">c++</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">40</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">3</td>
        <td class="tdtwo">matlab</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">90</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr>
        <td class="tdone xuhao">4</td>
        <td class="tdtwo">python入门</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">30</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">5</td>
        <td class="tdtwo">数据库系统</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">50</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">6</td>
        <td class="tdtwo">算法导论</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">45</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">7</td>
        <td class="tdtwo">软件测试</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">40</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr>
        <td colspan="6" class="talast">
            商品一共 <span class="goods_num">0</span> 件; 共计花费
                <span class="pricetal">0</span> 元。
        </td>
        <!-- 其中最贵的商品单价是 <span class="pricest">0</span> 元</span> -->
        <td colspan="2">
        <button type="button" style="margin-left: 0px;" class="btn btn-outline-primary">去结算</button>

        </td></tr>
    </tbody>
</table>
<!--底部内容-->
</body>
<script>
    window.onload = function(){
        function cart(){
            this.abtn = document.querySelectorAll('input');
            this.ogood_num = document.querySelector('.goods_num');
            this.opricetal = document.querySelector('.pricetal');
            this.opricest = document.querySelector('.pricest');
            this.totalnum = 0;
        };
        //小计:  商品数量 * 商品单价
        cart.prototype.getsubtotal = function(goodsnum,unitprice){
            return parseInt(goodsnum) * parseFloat(unitprice) ;
        };
        // 计算商品的总计花费
        cart.prototype.gettotal = function(){
            var asubtotal = document.querySelectorAll('.subtal');
            var res = 0;
            for(var i=0,len=asubtotal.length;i<len;i++){
                res += parseFloat(asubtotal[i].innerHTML);
            };
            return res;
        };
        // 寻找购物车中已经选中的产品的最大单价
        cart.prototype.compareMaxunit = function(){
            var anum = document.querySelectorAll('.num');
            var aunit = document.querySelectorAll('.unit');
            var temp = 0;
            for(var i=0,len=anum.length;i<len;i++){
                if(anum[i].innerHTML!=0){
                    if(temp<parseFloat(aunit[i].innerHTML)){
                        temp = parseFloat(aunit[i].innerHTML);
                    }
                }
            };
            return temp;
        };
        // 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.plus = function(obtn){
            var onum = obtn.parentNode.querySelector('.num');
            var n = parseInt(onum.innerHTML);
            onum.innerHTML = ++n ;
            this.totalnum++;
            var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
            var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
            osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);
            this.ogood_num.innerHTML = this.totalnum;
            this.opricetal.innerHTML = this.gettotal();
            this.opricest.innerHTML = this.compareMaxunit();
        };
        // 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.minus = function(obtn){
            var onum = obtn.parentNode.querySelector('.num');
            if(parseInt(onum.innerHTML)>0){
                var n = parseInt(onum.innerHTML);
                onum.innerHTML = --n ;
                this.totalnum--;
                var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
                var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
                osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);
                this.ogood_num.innerHTML = this.totalnum;
                this.opricetal.innerHTML = this.gettotal();
                this.opricest.innerHTML = this.compareMaxunit();
            }
        };
        // 获取已买商品的总计数量
        cart.prototype.getNumbertal = function(){
            var anum = document.querySelectorAll('.num');
            var res_num = 0;
            for(var i =0;i<anum.length;i++){
                res_num += parseInt( anum[i].innerHTML ) ;
            }
            return res_num ;
        }
        // 删除按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.del = function(obtn){
            var odel = obtn.parentNode.parentNode;
            var oparent = odel.parentNode;
            oparent.removeChild(odel);
            this.ogood_num.innerHTML = this.getNumbertal();
            this.opricetal.innerHTML = this.gettotal();
            this.opricest.innerHTML = this.compareMaxunit();
            this.xuhaosort();
        }
        // 购物车序号重新排序
        cart.prototype.xuhaosort = function(){
            var axuhao = document.querySelectorAll('.xuhao');
            for(var i=0,len=axuhao.length;i<len;i++){
                axuhao[i].innerHTML = i+1;
            }
        }
        // 绑定“+”，“-”，删除按钮的点击事件
        cart.prototype.bind = function(){
            var that = this ;
            for(var i=0;i<this.abtn.length;i++){
                if(i%2 !=0){
                    this.abtn[i].onclick = function(){
                        that.plus(this);
                    }
                }else{
                    this.abtn[i].onclick = function(){
                        that.minus(this);
                    }
                }
            };
            var delbtn = document.querySelectorAll('.del');
            for(var i=0;i<delbtn.length;i++){
                delbtn[i].onclick = function(){
                    that.del(this);
                }
            }
        };
        var oCart = new cart();
        oCart.bind();
    }
</script>
</html><!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<body background=""></body>
</head>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV" crossorigin="anonymous"></script> -->
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="gg.js"></script>
    <link rel="stylesheet" href="gg.css">
</head>
<style>
    table{
        width:80%;
        position:relative;
        margin:30px auto;
        border-collapse: collapse;
        border:1px solid gray;
    }
    th{
        background: cornflowerblue;
        height:2.5em;
    }
    .tdone{
        width:8%;
        text-align: center;
    }
    .tdtwo{
        width:20%;
        text-align: center;
    }
    .tdthree{
        width:12%;
        text-align: center;
    }
    .tdfour{
        width:20%;
        text-align: center;
    }
    .tdfive{
        width:10%;
        text-align: center;
    }
    .tdsix{
        width:10%;
        text-align: center;
    }
    .tdseven{
        width:20%;
        text-align: center;
    }
    td{
        height:2em;
        text-align: center;
        border:1px solid #ccc;
    }
    .num{
        display:inline-block;
        width:3em;
    }
    input{
        height:2em;
    }
    /* .talast{
        text-align: left;
    } */
</style>
<body>

<table>
    <thead>
    <tr>
        <th class="tdone">序号</th>
        <th class="tdtwo">商品名称</th>
        <th class="tdthree">数量</th>
        <th class="tdfour">单价</th>
        <th class="tdfive">小计</th>
        <th class="tdsix">操作</th>
        <th class="tdseven">订单号</th>
    </tr>
    </thead>
    <tbody>
    <tr class="trclass">
        <td class="tdone xuhao">1</td>
        <td class="tdtwo ">Java语言与应用</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">80</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">2</td>
        <td class="tdtwo">c++</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">40</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">3</td>
        <td class="tdtwo">matlab</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">90</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr>
        <td class="tdone xuhao">4</td>
        <td class="tdtwo">python入门</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">30</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">5</td>
        <td class="tdtwo">数据库系统</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">50</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">6</td>
        <td class="tdtwo">算法导论</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">45</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr class="trclass">
        <td class="tdone xuhao">7</td>
        <td class="tdtwo">软件测试</td>
        <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td>
        <td class="tdfour"><span>单价：</span><span class="unit">40</span></td>
        <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td>
        <td class="tdsix"><button class="del">删除</button></td>
        <td class="tdseven">111111111111111</td>
    </tr>
    <tr>
        <td colspan="6" class="talast">
            商品一共 <span class="goods_num">0</span> 件; 共计花费 <span class="pricetal">0</span> 元。
        <!-- 其中最贵的商品单价是 <span class="pricest">0</span> 元</span> -->
        </td>
        <td colspan="2">
            <button type="button" style="margin-left: 0px" class="btn btn-outline-primary">去结算</button>
        </td>
        </tr>
    </tbody>
</table>
<!--底部内容-->
</body>
<script>
    window.onload = function(){
        function cart(){
            this.abtn = document.querySelectorAll('input');
            this.ogood_num = document.querySelector('.goods_num');
            this.opricetal = document.querySelector('.pricetal');
            this.opricest = document.querySelector('.pricest');
            this.totalnum = 0;
        };
        //小计:  商品数量 * 商品单价
        cart.prototype.getsubtotal = function(goodsnum,unitprice){
            return parseInt(goodsnum) * parseFloat(unitprice) ;
        };
        // 计算商品的总计花费
        cart.prototype.gettotal = function(){
            var asubtotal = document.querySelectorAll('.subtal');
            var res = 0;
            for(var i=0,len=asubtotal.length;i<len;i++){
                res += parseFloat(asubtotal[i].innerHTML);
            };
            return res;
        };
        // 寻找购物车中已经选中的产品的最大单价
        cart.prototype.compareMaxunit = function(){
            var anum = document.querySelectorAll('.num');
            var aunit = document.querySelectorAll('.unit');
            var temp = 0;
            for(var i=0,len=anum.length;i<len;i++){
                if(anum[i].innerHTML!=0){
                    if(temp<parseFloat(aunit[i].innerHTML)){
                        temp = parseFloat(aunit[i].innerHTML);
                    }
                }
            };
            return temp;
        };
        // 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.plus = function(obtn){
            var onum = obtn.parentNode.querySelector('.num');
            var n = parseInt(onum.innerHTML);
            onum.innerHTML = ++n ;
            this.totalnum++;
            var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
            var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
            osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);
            this.ogood_num.innerHTML = this.totalnum;
            this.opricetal.innerHTML = this.gettotal();
            this.opricest.innerHTML = this.compareMaxunit();
        };
        // 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.minus = function(obtn){
            var onum = obtn.parentNode.querySelector('.num');
            if(parseInt(onum.innerHTML)>0){
                var n = parseInt(onum.innerHTML);
                onum.innerHTML = --n ;
                this.totalnum--;
                var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');
                var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');
                osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);
                this.ogood_num.innerHTML = this.totalnum;
                this.opricetal.innerHTML = this.gettotal();
                this.opricest.innerHTML = this.compareMaxunit();
            }
        };
        // 获取已买商品的总计数量
        cart.prototype.getNumbertal = function(){
            var anum = document.querySelectorAll('.num');
            var res_num = 0;
            for(var i =0;i<anum.length;i++){
                res_num += parseInt( anum[i].innerHTML ) ;
            }
            return res_num ;
        }
        // 删除按钮触发的购物车商品数量，花费，最大价格的变动
        cart.prototype.del = function(obtn){
            var odel = obtn.parentNode.parentNode;
            var oparent = odel.parentNode;
            oparent.removeChild(odel);
            this.ogood_num.innerHTML = this.getNumbertal();
            this.opricetal.innerHTML = this.gettotal();
            this.opricest.innerHTML = this.compareMaxunit();
            this.xuhaosort();
        }
        // 购物车序号重新排序
        cart.prototype.xuhaosort = function(){
            var axuhao = document.querySelectorAll('.xuhao');
            for(var i=0,len=axuhao.length;i<len;i++){
                axuhao[i].innerHTML = i+1;
            }
        }
        // 绑定“+”，“-”，删除按钮的点击事件
        cart.prototype.bind = function(){
            var that = this ;
            for(var i=0;i<this.abtn.length;i++){
                if(i%2 !=0){
                    this.abtn[i].onclick = function(){
                        that.plus(this);
                    }
                }else{
                    this.abtn[i].onclick = function(){
                        that.minus(this);
                    }
                }
            };
            var delbtn = document.querySelectorAll('.del');
            for(var i=0;i<delbtn.length;i++){
                delbtn[i].onclick = function(){
                    that.del(this);
                }
            }
        };
        var oCart = new cart();
        oCart.bind();
    }
</script>
</html>